import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import TechDetail from './views/TechDetail.vue'
import AIGuide from './views/AIGuide.vue'
import About from './views/About.vue'
import ProgrammerDay from './views/ProgrammerDay.vue'
import './style.css'
import { feedbackDirective } from './directives/feedback'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/tech/:id',
      name: 'TechDetail',
      component: TechDetail,
      props: true
    },
    {
      path: '/guide',
      name: 'AIGuide',
      component: AIGuide
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/1024',
      name: 'ProgrammerDay',
      component: ProgrammerDay
    }
  ],
  scrollBehavior(to, from, savedPosition) {
    // 如果有保存的位置（浏览器后退/前进），使用保存的位置
    if (savedPosition) {
      return savedPosition
    }
    
    // 如果有 hash 锚点，滚动到对应元素
    if (to.hash) {
      return new Promise((resolve) => {
        // 延迟执行以确保 DOM 已渲染
        setTimeout(() => {
          const element = document.querySelector(to.hash)
          if (element) {
            // 直接滚动到元素位置
            element.scrollIntoView({ behavior: 'smooth', block: 'start' })
            resolve({
              el: to.hash,
              behavior: 'smooth',
              top: 0
            })
          } else {
            resolve({ top: 0, behavior: 'smooth' })
          }
        }, 500) // 增加延迟时间到500ms
      })
    }
    
    // 否则滚动到页面顶部
    return { top: 0, behavior: 'smooth' }
  }
})

const app = createApp(App)

// 注册全局指令
app.directive('feedback', feedbackDirective)

app.use(router)
app.mount('#app')

